<template>
    <div id="sign-show" :class="visible?'sign-show':''">
        <div class="sign">
            <div class="sign-mask"></div>
            <div class="sign-box">
              <div class="sign-title">手机登陆</div>

              <div style="text-align: center;color: red;font-size: 13px;font-weight: 500" >{{errorMsg}}</div>

              <el-form ref="form" :model="form" size="small" style="padding:10px 25px;">
                <el-form-item label="" prop="phone"
                              :rules="[ { required: true, message: '请输入手机号' },{pattern:regMobile(),message: '手机号格式错误',trigger: ['blur', 'change'], }]">
                  <el-input prefix-icon="el-icon-mobile-phone" v-model="form.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="" prop="pwd"
                              :rules="[ { required: true, message: '请输入密码' },{pattern:regPassword(),message: '请输入6-12位密码，须包含字母、数字',trigger: ['blur', 'change'], }]">
                  <el-input prefix-icon="el-icon-lock" v-model="form.pwd"
                            placeholder="请输入6-12位密码，须包含字母、数字" type='password'  />
                </el-form-item>
                <el-form-item style="text-align: center">
                  <el-button type="danger" @click="login">登录</el-button>
                  <el-button @click="loginHide">关闭</el-button>
                </el-form-item>
              </el-form>
<!--                <div class="sign-wrap" >-->
<!--                    <div class="sign-close">×</div>-->
<!--                </div>-->
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "mobileLogin",
        model: {
            prop: 'visible',
            event: 'change'
        },
        props: {
          visible: Boolean,
        },
        data() {
            return {
                showLogin:false,
                form:{
                  phone:"",
                  pwd:""
                },
                //errorMsg:"首次使用手机登录请先微信扫码登录"
                errorMsg:""
            };
        },

        created(){

        },


        methods: {
            regPassword(){
              return /^(?=.*[a-zA-Z])(?=.*\d).{6,12}$/
            },
            regMobile(){
              return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/

            },
            login(){
              this.$refs.form.validate((valid) => {
                if (valid) {
                  this.$apis.phoneLogin(this.form).then(res=>{

                    if(res.code==401){
                      this.errorMsg = res.msg
                      return;
                    }

                    if(!res){
                      return;
                    }
                    if(!res.status){
                      this.errorMsg = res.msg
                    }
                    let userInfo=res.data.records;
                    let token=userInfo.token;
                    this.$store.dispatch('user/updateUserInfo', userInfo)
                    this.$store.dispatch('user/updateToken', token)
                    this.$message.success('登录成功')
                    this.$emit('change', false)
                  })
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });

            },
            loginHide(){
                clearInterval(this.qr_code_time);
                this.$emit('change', false)
            },

        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

  .sign-title{
    list-style: none;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    text-align: center;
    color: #767A80;
    line-height: 33px;
    margin-top:10px;
    cursor: pointer;
  }
</style>
